<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="flex justify-center p-6">
    <nav aria-label="Breadcrumb">
      <ol
        class="flex overflow-hidden rounded border border-gray-300 bg-white text-sm text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
      >
        <li>
          <a
            href="#"
            class="block h-10 bg-gray-100 px-4 leading-10 transition-colors hover:text-gray-900 dark:bg-gray-700 dark:hover:text-white"
          >
            Home
          </a>
        </li>

        <li class="relative flex items-center">
          <span
            class="absolute inset-y-0 -start-px h-10 w-4 bg-gray-100 [clip-path:_polygon(0_0,_0%_100%,_100%_50%)] rtl:rotate-180 dark:bg-gray-700"
          >
          </span>

          <a
            href="#"
            class="block h-10 pr-4 pl-6 leading-10 transition-colors hover:text-gray-900 dark:hover:text-white"
          >
            Category
          </a>
        </li>
      </ol>
    </nav>
  </body>
</html>
